﻿<!DOCTYPE html>
<html lang="zh-Hans" xmlns:th="http://www.thymeleaf.org">
<th:block th:include="frontInclude :: frontHeader"/>
<body class="wel-body">
<header class="headerbox pcbox" th:replace="frontInclude :: header_menu"></header>
<div class="mbox" th:replace="frontInclude :: header_menu_mobile"></div>
<div class="con-banner">
    <div class="images pcbox"
         th:style="'background:url('+@{/img/banner3.jpg}+') no-repeat center;background-size: cover;'">
    </div>
    <img img class="mbox h500" th:src="@{/img/banner3.jpg}" alt="走进黑蝎">
    <div class="words">
        <div class="text w1280">
            <div class="tit-en tit-48 secwen">About us</div>
            <div class="tit-cn tit-36 secwen add1">走进黑蝎</div>
            <div class="line secwen add2"></div>
        </div>
    </div>
</div>
<div class="con-column secwen animate">
    <div class=" column-swiper w1280" data-s="7" data-l="6" data-m="3">
        <div class="swiper-container swiper-container-horizontal">
            <div class="swiper-wrapper">
                <div th:each="item : ${currentChildren}"
                     th:class="@{${item.active!=null && item.active==1?'swiper-slide-active':''}+' swiper-slide'}"
                     style="width: 155.571px;">
                    <a th:href="${item.pageUrl}"
                       th:class="@{${item.active!=null && item.active==1?'active':''}+' items'}">
                        <div class="span" th:text="${item.menuName}">黑蝎简介</div>
                    </a>
                </div>
            </div>
        </div>
        <div class="buts">
            <div class="swiper-button-prev swiper-button-disabled"></div>
            <div class="swiper-button-next swiper-button-disabled"></div>
        </div>
    </div>
</div>
<div class="j-about">
    <div class="j-about-top">
        <div class="s-span secwen"
             th:style="'background:url('+@{/bocweb/web/img/jpg/j17.png}+') no-repeat center;background-size: 100%;'"></div>
        <div class="a-span secwen"
             th:style="'background:url('+@{/bocweb/web/img/jpg/j19.png}+') no-repeat center;background-size: 100%;'"></div>
        <div class="w1280 f-cb wordsbox text-con" style="text-align: left;">
            <div class="words fl secwen animate">
                <div class="txt tit-44" th:text="${article.articleTitle}">真心缔造美好家园</div>
                <div class="p">
                    <p style="text-indent: 2em;" th:utext="${article.articleDescribe}">
                        黑蝎控股集团有限公司（简称“黑蝎控股”）是一家以工程服务、美好生活服务、新材料新能源为三大主营业务的大型企业集团，总部位于中国浙江省杭州市钱江新城。为全国质量奖单位、全国文明单位、全国守合同重信用单位、中国优秀企业公民、中华慈善奖企业，黑蝎控股LOGO被国家工商总局认定为“中国驰名商标”。
                    </p>
                    <p><br></p>
                </div>
            </div>
            <div class="images secwen add2 fr animate items-c">
                <div class="img">
                    <video muted="muted" width="100%" height="95%" controls="controls" autoplay="autoplay" loop="loop" preload="auto" th:src="${article.articleVideo}"></video>
                </div>
            </div>
        </div>
    </div>
    <div class="j-about">
        <div class="j-about-top">
            <div class="w1280 f-cb wordsbox text-con" style="text-align: left;" th:utext="${article.articleContent}">

            </div>
        </div>
    </div>
    <div class="j-about-bot"
         th:style="'background:url'+@{(/img/i9.jpg}+') no-repeat center;background-size:cover;'">
        <div class="w1280  j-ab-botswiper">
            <div class="tit secwen animate">
                <div class="tc txt tit-36">现有规模</div>
                <div class="buts">
                    <div class="swiper-button-prev swiper-button-disabled"></div>
                    <div class="swiper-button-next swiper-button-disabled"></div>
                </div>
            </div>
            <div class="words-box secwen add2 animate">
                <div class="swiper-container swiper-container-horizontal">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide swiper-slide-active" style="width: 307px;">
                            <div class="items">
                                <div class="num">100+</div>
                                <div class="span">服务省内外各州市100余家单位</div>
                            </div>
                        </div>
                        <div class="swiper-slide swiper-slide-next" style="width: 307px;">
                            <div class="items">
                                <div class="num">999+</div>
                                <div class="span">承接重点招商项目策划包装1000余套</div>
                            </div>
                        </div>
                        <div class="swiper-slide" style="width: 307px;">
                            <div class="items">
                                <div class="num">100+</div>
                                <div class="span">招商专案百余本</div>
                            </div>
                        </div>
                        <div class="swiper-slide" style="width: 307px;">
                            <div class="items">
                                <div class="num">100+</div>
                                <div class="span">招商专案百余本</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 专业服务区域 -->
<!--<div class="services-section" style="padding: 80px 0; background: #f8f9fa;">-->
<!--    <div class="w1280">-->
<!--        <div class="con-text tc" style="margin-bottom: 50px;">-->
<!--            <div class="tit-en secwen" style="font-size: 36px; color: #333;">Our Services 2025</div>-->
<!--            <div class="tit-cn secwen add1" style="font-size: 28px; color: #666; margin-top: 10px;">专业服务 · 创新未来</div>-->
<!--            <div class="txt secwen add2" style="font-size: 16px; color: #999; margin-top: 20px; max-width: 800px; margin-left: auto; margin-right: auto;">-->
<!--                黑蝎策划2025年全新服务体系，融合前沿技术与专业经验，为客户提供全方位、一站式的专业服务解决方案-->
<!--            </div>-->
<!--        </div>-->

<!--        <div class="services2025-grid">-->
<!--            <div class="service-card" data-service="project-packaging">-->
<!--                <h3>项目包装策划宣传渠道构建(海内外)</h3>-->
<!--                <p>海内外项目包装策划与宣传渠道构建，提升项目价值，扩大品牌影响力，实现精准传播。</p>-->
<!--                <a href="/front/achievement" class="btn">查看案例</a>-->
<!--            </div>-->

<!--            <div class="service-card" data-service="dt-tech">-->
<!--                <h3>DT数据技术（应用软件开发）</h3>-->
<!--                <p>专业的应用软件开发服务，涵盖数据处理、分析平台、智能系统等技术解决方案，助力企业数字化转型。</p>-->
<!--                <a href="/front/achievement" class="btn">查看案例</a>-->
<!--            </div>-->

<!--            <div class="service-card" data-service="data-analysis">-->
<!--                <h3>数据采集与行业分析</h3>-->
<!--                <p>深度行业调研与数据分析服务，为企业决策提供科学依据，洞察市场趋势，把握发展机遇。</p>-->
<!--                <a href="/front/achievement" class="btn">查看案例</a>-->
<!--            </div>-->

<!--            <div class="service-card" data-service="investment-service">-->
<!--                <h3>精准招商中介服务(海内外)</h3>-->
<!--                <p>海内外精准招商服务，整合优质资源，搭建合作桥梁，为项目方与投资方提供专业对接服务。</p>-->
<!--                <a href="/front/achievement" class="btn">查看案例</a>-->
<!--            </div>-->

<!--            <div class="service-card" data-service="rural-revitalization">-->
<!--                <h3>乡村振兴 产业规划</h3>-->
<!--                <p>专业的乡村振兴战略规划与产业发展咨询，助力乡村经济转型升级，实现可持续发展。</p>-->
<!--                <a href="/front/achievement" class="btn">查看案例</a>-->
<!--            </div>-->

<!--            <div class="service-card" data-service="park-incubation">-->
<!--                <h3>园区孵化 运营管理</h3>-->
<!--                <p>产业园区孵化与专业运营管理服务，提供全生命周期支持，打造高效产业生态圈。</p>-->
<!--                <a href="/front/achievement" class="btn">查看案例</a>-->
<!--            </div>-->

<!--            <div class="service-card" data-service="media-design">-->
<!--                <h3>影视传媒</h3>-->
<!--                <p>专业的影视制作与平面设计服务，创意策划与视觉呈现完美结合，打造优质品牌形象。</p>-->
<!--                <a href="/front/achievement" class="btn">查看案例</a>-->
<!--            </div>-->

<!--            <div class="service-card" data-service="graphic-design">-->
<!--                <h3>平面设计</h3>-->
<!--                <p>专业的平面设计服务，包括LOGO设计、品牌形象、宣传物料等，为企业打造独特的视觉识别系统。</p>-->
<!--                <a href="/front/achievement" class="btn">查看案例</a>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<style>
.services2025-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin: 50px 0;
}
.service-card {
    border-radius: 15px;
    padding: 30px;
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}
.service-card[data-service="dt-tech"] {
    background: linear-gradient(135deg, #ed5565 0%, #ff6b7a 100%);
}
.service-card[data-service="data-analysis"] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.service-card[data-service="investment-service"] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
.service-card[data-service="project-packaging"] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}
.service-card[data-service="rural-revitalization"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.service-card[data-service="park-incubation"] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.service-card[data-service="media-design"] {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    color: #333;
}
.service-card[data-service="graphic-design"] {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    color: #333;
}
.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 100%);
    pointer-events: none;
}
.service-card h3 {
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: bold;
    color: white;
}
.service-card p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.service-card .btn {
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.3);
    color: white;
    padding: 10px 25px;
    border-radius: 25px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}
.service-card .btn:hover {
    background: rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.5);
    color: white;
    text-decoration: none;
}
.service-card[data-service="media-design"] .btn,
.service-card[data-service="graphic-design"] .btn {
    color: #333;
    background: rgba(0,0,0,0.1);
    border-color: rgba(0,0,0,0.2);
}
.service-card[data-service="media-design"] .btn:hover,
.service-card[data-service="graphic-design"] .btn:hover {
    background: rgba(0,0,0,0.2);
    border-color: rgba(0,0,0,0.3);
    color: #333;
}
@media (max-width: 768px) {
    .services2025-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 30px 0;
    }
    .service-card {
        padding: 20px;
    }
    .service-card h3 {
        font-size: 20px;
    }
}
</style>

<div th:replace="frontInclude :: footer"></div>
<script>
    $(function(){
        _number(1,0);
        clickVideo($(".images .w100"))
        var about = new Swiper('.j-ab-botswiper .swiper-container',{
            slidesPerView : 3,
            prevButton:'.j-ab-botswiper .swiper-button-prev',
            nextButton:'.j-ab-botswiper .swiper-button-next',
        })

        $(".j-about-top .s-more").on("click",function(){
            $(".text-fixed-words").fadeIn();
            $("body,html").addClass("on");
        })

        $(".text-fixed-words .close,.text-fixed-words").on("click",function(){
            $(".text-fixed-words").fadeOut();
            $("body,html").removeClass("on");
        })
        $(".text-fixed-words .fixed-box").on("click",function(e){
            e.stopPropagation();
        })
    })
</script>
</body>
</html>